<%@ page contentType="text/html;charset=utf-8"%>
<%@ include file="/common/extjs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<script type="text/javascript" src="../js/test.js">
</script>

		<script type="text/javascript" src="../js/appscripts/ItemDetails.js">
</script>

		<script type="text/javascript">
		
	//每页显示菜品个数
    var pageSize = 5;

	/*
	 *简单map实现
	 *来源：http://www.oschina.net/code/snippet_87799_566
	 */
	var Map = function() {
			this.elements = new Array();
		
			//向MAP中增加元素（key, value) 
			this.put = function(_key, _value) {
				this.elements.push( {
					key : _key,
					value : _value
				});
			};
		
			//获取指定KEY的元素值VALUE，失败返回NULL
			this.get = function(_key) {
				try {
					for (i = 0; i < this.elements.length; i++) {
						if (this.elements[i].key == _key) {
							return this.elements[i].value;
						}
					}
				} catch (e) {
					return null;
				}
			};
	
	};

	//菜系id和name的Map
	var itemsMap = new Map();

	/**
	 * 菜品查询面板
	 */
	var menuQueryFormPanel = function(customConfig){
    	
	    	//菜名查询输入
	    	var menuQueryName = new Ext.form.TextField({
	    		id : "itemDetailName",
	    		width : 80,
	    		value : ''
	    	});
    	
    	//菜品目录查询
    	var menuQueryCatalog = new Ext.form.ComboBox({
	    		id : 'parentid',
	            emptyText:'请选择菜系',
	            store:             new Ext.data.JsonStore({
					       	    fields :     ['id','name'],
					       	    autoLoad:true,
					       	    root:'',
					       	    method: 'GET',
					       	    proxy : new Ext.data.HttpProxy({
					       	    			url:'/apple/itemdetailmgr/items.json.htm'
					       	    			})
	           	 	}),
	            displayField:'name',
	            valueField:'id',
	            typeAhead: true,
	            mode: 'local',
	            setEditable:false,
	            forceSelection: true,
	            triggerAction: 'all',
	            selectOnFocus:true
    	});

    	//查询操作
    	var queryHandler = null;

    	//查询按钮
    	var queryBtn = new Ext.Button({
			text	:	" 查询 ",
			iconCls	:	"icon-query",
			handler	: function() {
				Ext.getCmp('menuInfoGrid').store.load({              
													  	params:{                      
													    start:0,                        
													    limit:pageSize,
													    itemDetailName:Ext.getCmp('itemDetailName').getValue(),
        												parentid:Ext.getCmp('parentid').getValue()
													   }
					});
				}
			});
    	
    	//查询表单面板
		var formPanel = new Ext.form.FormPanel({
			layout : "toolbar",	
			border : false,
			bodyBorder : false,
			bodyStyle : 'background: transparent',
			items:[
				new Ext.Toolbar.TextItem('菜品名称'),
					menuQueryName,
					{xtype : "spacer",width : 8},
					new Ext.Toolbar.TextItem('菜品类别'),
					menuQueryCatalog,
					{xtype:"spacer",width : 5},
					queryBtn
				]
		});

		// 返回表单面板
		this.getFormPanel = function(){
			return formPanel;
		};
		
    };
    
    /////////////////////////////////////////////////////////////////////////////////////////////////////////

   //创建表单
   function add_edit_Form(){
       var form=new Ext.form.FormPanel({
       	labelAlign :                     'left',
		bodyStyle:                       'padding:10px;',
		labelWidth:                      80,
		autoHeight:                      true,
		frame :                          true,
		    items :[{
       	    		xtype :              'textfield',
       	    		allowBlank:          false,
  	    			readOnly:            bl,
  	    			blankText:           '菜名不能为空',
       	    		name:                'name',
       	    		id:					 'name_input',
       	    		fieldLabel :         '菜品名称<font color=red>*</font>'
           	    },{
       	    		xtype :              'numberfield',
       	    		name:                'price',
       	    		id:					'price_input',
       	    		fieldLabel :         '菜品价格(元)'
           	    },{
       	    		xtype :              'numberfield',
       	    		name:                'discount',
       	    		id:					'discount_input',
       	    		fieldLabel :         '菜品折扣(元)'
           	    },{
          	    		xtype :              'combo',
          	    		width :              150,
          	    		valueField :         'id',
          	    		id:						'catelog_input',
          	    		name:					'parentid',
          	    		displayField :       'name',
          	    		allowBlank:          false,
          	    		triggerAction :      'all',
          	    		editable :           false,
          	    		emptyText :          '请选择菜系',
          	    		fieldLabel :         '菜品类别<font color=red>*</font>',
       	    			store:             new Ext.data.JsonStore({
       	    				autoLoad:true,
       	    				fields :     ['id','name'],
       	    				root:'',
       	    				method: 'GET',
       	    				proxy : new Ext.data.HttpProxy({
       	    					url:'/apple/itemdetailmgr/items.json.htm'
       	    					})
           	    			}),
           	    		hiddenName:'parentid'
              },{
       	    		xtype :              'textarea',
       	    		name:                'descript',
       	    		id:					'descript_input',
       	    		fieldLabel :         '菜品描述'
           	    }]
           });
       return form;
       }
	/////////////////////////////////////////////////////////////////////////////////////////////////////
	
	///////创建弹窗
	    function window_add_edit(status){
	      var window=new Ext.Window({
	            	title:                    "信息（" + status + "）",
	            	resizable :               false,
				    autoHeight :              true, // 自动适应高度
				    width :                   '27%',
				    modal :                   true,
				    items :                   [fp],
				    buttonAlign :             "center",
				    buttons : [
							   {text :        "保存",
								handler : function() {
									var postUrl=null;
									var txt=null;
									    if(status=='Save'){
										    postUrl="/apple/itemdetailmgr/itemdetail.save.htm";
										    txt="添加";
										    Window_SaveSubmit(postUrl,txt);
										    
									    }else{
										    postUrl="/apple/itemdetailmgr/itemdetail.update.htm?id=" + Ext.getCmp('menuInfoGrid').getSelectionModel().getSelected().data.id;
										    txt="修改";
										    Window_SaveSubmit(postUrl,txt);
									    }
							      }
							   }, 
							   {
								   text : '重置',
								   handler : function(){reset();}
							   },{
								   text : "关闭",
								   handler : function() {close();}
							   }
							 ]
	            });
	        return window;
	        }
         

//////////////////////////////////////////////////////////////////////////////////////////////
			//数据修改
			function loadUpdateForm() {
				 var paramlist = Ext.getCmp('menuInfoGrid').getSelectionModel().getSelected();
				 var url = '/apple/itemdetailmgr/oneItemDetail.json.htm';
				     editWindowform(paramlist,url);
			}
		
/////////////////////////////////////////////////////////////////////////////////////////////////////////

    /**
     * 菜品管理gird
     */
     var menuInfoGrid = function(customConfig){

     	var defalutConfig = {
     		title : '菜品信息'
     	};
     	var configs = Ext.apply({},customConfig,defalutConfig);

     	//工具栏
     	var tbar = new Ext.Toolbar({
     		items : [{
     			text : '添加菜品',
     			iconCls : 'icon-add',
     			tooltip : '添加一个新的菜品',
     			handler : function (){
     				showWindow("Save");
     				fp.form.reset();
     			}
     		},{
     			text : '修改',
     			iconCls : 'icon-edit',
     			tooltip : '修改',
     			handler:function(){
     				var menuIds = getSelectIds();
                    if(menuIds.length != 1){
                        Ext.Msg.alert('提示','必须且只能选中一个要修改!');
                        return;
                    }
                    loadUpdateForm();
     			}
     		},{
                text : '删除',
                iconCls : 'icon-delete',
                tooltip : '删除',
                handler : function(){
                    var menuIds = getSelectIds();
                    if(menuIds.length == 0) {
                        Ext.Msg.alert("提示", "请至少选中一个要删除的测站信息!");
                        return;
                    }
                    var a = Ext.Msg.confirm('确定删除','确定要删除选中的菜品吗？',function(btn,text){
                        if(btn == 'yes'){
                            Ext.Ajax.request({
                                url : configs.urlDelete,
                                params : {'menuId' : menuIds},
                                success : function(response,options){
                                    var data = Ext.decode(response.responseText);
                                    if(data.success){
                                        store.reload();
                                    }else{
                                        Ext.Msg.alert("错误",data.message);
                                    }
                                }
                            });
                        }
                    })
                }
            }]
     	});

        //菜品信息字段
        var fields = [
            {name : 'id'},
            {name : 'name'},
            {name : 'descript'},
            {name : 'price',type : 'float'},
            {name : 'discount',type : 'float'},
            {name : 'imageName'},
            {name : 'parentid'}
        ];

        //复选框列
        var sm = new Ext.grid.CheckboxSelectionModel();
        
        /**
         * 重载Ext.grid.RowNumberer
         * 来源：http://hi.baidu.com/e9151/blog/item/79eec5452be7c441500ffe68.html
         */
        Ext.grid.RowNumberer = Ext.extend(Ext.grid.RowNumberer, {
			    renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
			        return store.lastOptions.params.start + rowIndex + 1;   
			    }   
		});

        //表头
        var cms = [
            sm,
           new Ext.grid.RowNumberer(),
            {header : '菜品名称',align : 'center',dataIndex : 'name'},
            {header : '菜品价格[元]',align : 'center',sortable : true,dataIndex : 'price'},
            {header : '菜品折扣[元]',align : 'center',sortable : true,dataIndex : 'discount'},
            {header : '菜品类别',align : 'center',sortable : true,dataIndex : 'parentid',renderer : function(value){return itemsMap.get(new Number(value))}},
            {header : '菜品描述',align : 'center',dataIndex : 'descript'}
        ];



        //创建store
        var store = new Ext.data.JsonStore({
          	reader:new Ext.data.JsonReader({idProperty:'id',remoteSort: true}),
            fields : fields,
            root : 'itemdetails',
            totalProperty: 'totalCount',
            proxy : new Ext.data.HttpProxy({url : "/apple/itemdetailmgr/itemDetails.json.htm"}),
            listeners:{
        		beforeload : function(){
        				this.baseParams = {
							   itemDetailName:Ext.getCmp('itemDetailName').getValue(),
							   parentid:Ext.getCmp('parentid').getValue()
							  };
        		}
            }
        });
        
        //加载菜系数据方便显示在grid中菜系列
        Ext.Ajax.request({
        					url:'/apple/itemdetailmgr/items.json.htm',
        					success : function(response){
        										var ob = Ext.decode(response.responseText)
        										//写入菜系Map
        										for(var i = 0;i < ob.length; i ++){
            										itemsMap.put(ob[i].id,ob[i].name);
            									}
        										//菜系Map数据写入完成再加载grid
        										store.load({              
													  	params:{                      
													    start:0,                        
													    limit:pageSize,
													    itemDetailName:Ext.getCmp('itemDetailName').getValue(),
        												parentid:Ext.getCmp('parentid').getValue()
													   }
												});
        									},
        					failure: function() {
								            	 Ext.Msg.alert("提示信息", "菜系加载失败,请稍后重试！");
								        	 }
        	});
        
        // 分页栏
        var ptbar = new Ext.PagingToolbar({
            pageSize : pageSize,
            store : store,
            autoWidth : true,
            displayInfo : true,
            displayMsg : '显示第{0}到第{1}条记录，一共{2}条',
			emptyMsg : "没有记录"
        });

        //菜品信息表格
        var grid = new Ext.grid.GridPanel({
            store : store,
            id : "menuInfoGrid",
            sm : sm,
            columns : cms,
            frame : true,
            width : '100%',
            collapsible : false,
            animCollapse : false,
            loadMask : true,
            stripeRows : true,//隔行显示背景色
            title : configs.title,
            iconCls : 'icon-grid',
            tbar : tbar,
            bbar : ptbar,//分页栏
            viewConfig : {  
                columnsText : "显示/隐藏列",  
                sortAscText : "正序排列",  
                sortDescText : "倒序排列"  
            }
        });

        //得到选中的行的id
        var getSelectIds = function() {
            var rows = grid.getSelectionModel().getSelections();
            var id = new Array(rows.length);
            for(var i = 0;i < rows.length;i ++) {
                id[i] = rows[i].get("id");
            }
            return id;
        };

        // 查询处理
        this.query = function(params) {
            for(var key in params) {
                store.setBaseParam(key,params[key]);
            }
            store.reload();
            
        };
            
        // 返回grid
        this.getGrid = function(){
            return grid;
        };
     };

    Ext.onReady(function(){ 
        var grid = new menuInfoGrid({
            "urlDelete" : "/apple/itemdetailmgr/itemdetail.delete.htm"
        });
        //grid.getGrid().getStore().load();
        var form = new menuQueryFormPanel();
           // form.setQueryHandler(grid.query);
            //将查询表单加在grid toolbar的右端
            grid.getGrid().getTopToolbar().add("->");
            grid.getGrid().getTopToolbar().add( form.getFormPanel() );
            
        var viewport = new Ext.Viewport({
            layout:'border', 
            items:[{
                region : 'center',
                layout : 'fit',
                border : false,
                autoScroll : true,
                items : grid.getGrid()
                }] 
            });     
        });

    </script>

		<title>菜单列表</title>
	</head>
	<body>

	</body>
</html>
